<template>
  <div>
    <el-alert
      :title="connectionStatusMessage"
      :type="connectionStatusType"
      :closable="false"
      show-icon
    />
    <el-input
      v-model="websocketStore.wsUrl"
      placeholder="请输入 WebSocket 地址"
      style="margin-top: 20px"
    />
    <el-button
      class="bg-blue-500"
      :type="websocketStore.connectionStatus === 'connected' ? 'danger' : 'primary'"
      style="margin-top: 20px"
      @click="toggleConnection"
    >
      {{ websocketStore.connectionStatus === 'connected' ? '断开连接' : '连接' }}
    </el-button>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useWebsocketStore } from '@stores/websocketStore.ts';
import { ElAlert, ElButton, ElInput } from 'element-plus';

const websocketStore = useWebsocketStore();

const connectionStatusMessage = computed(() => {
  switch (websocketStore.connectionStatus) {
    case 'connected':
      return 'WebSocket 已连接';
    case 'connecting':
      return 'WebSocket 正在连接...';
    case 'disconnected':
      return 'WebSocket 已断开连接';
    case 'error':
      return 'WebSocket 连接错误';
    default:
      return 'WebSocket 状态未知';
  }
});

const connectionStatusType = computed(() => {
  switch (websocketStore.connectionStatus) {
    case 'connected':
      return 'success';
    case 'connecting':
      return 'info';
    case 'disconnected':
      return 'warning';
    case 'error':
      return 'error';
    default:
      return 'info';
  }
});

const toggleConnection = () => {
  if (websocketStore.connectionStatus === 'connected') {
    websocketStore.disconnectWebSocket();
  } else {
    console.log('websocketStore.wsUrl', websocketStore.wsUrl);
    websocketStore.connectWebSocket(websocketStore.wsUrl);
  }
};
</script>
